
<head>
	
	<script type="text/javascript"
	src="http://maps.google.com/maps?file=api&v=2&key=<%= GeoKit::Geocoders::google %>">
	</script>


	
<script type="text/javascript">
    // helper function to create markers
    function createMarker(point,html) {
        var marker = new GMarker(point);
        GEvent.addListener(marker, "click", function() {
         marker.openInfoWindowHtml(html);
         });
        return marker;
    }
    
    // this is called when the page loads. 
    // it initializes the map, and creates each marker
    function initialize() {
        var map = new GMap(document.getElementById("map"));
        map.addControl(new GLargeMapControl());
        map.addControl(new GOverviewMapControl());
        map.addControl(new GMapTypeControl(true));
        map.centerAndZoom(new GPoint(-93.7056, 32.5447), 5);
        
        <%@places.each do |place|%>
        var point = new GPoint(<%=place[:lng]%>,<%=place[:lat]%>);
        var marker = createMarker(point,"<div><%=h place[:name]%><br><%=h place[:address]%></div>")
        map.addOverlay(marker);
        <%end%>
    }    
</script>

</head>
<body onload="initialize()">
	
	<%= render :partial => "select_range" %>

<h2>Household: <%= @household.name rescue nil %></h2>
<h3><%= @places.length %> mappable locations within <%= @range %> miles.</h3>

<% if ! @places.empty? %>
<%= link_to_function 'show list',toggle_location_list('show') %> | <%= link_to_function 'hide list',toggle_location_list('hide') %>
<div id="location_list">
	<div>Sorted by distance from the <b><%= @household.name %></b> home, closest to farthest.</div>
<ol>
	
	<% @places.each do |place| %>
		<li>
			<span>
				<%= place.name rescue nil %>
			</span>
			<span>
				<%= place.address rescue nil %>
			</span>
		</li>
	<% end %>
	
</ol>

</div>

<% else %>
	<div id="message-black">
		There are no mappable addresses near this household.
	</div>
<% end %>

<div id="map" style="width: 650px; height: 450px"></div>

</body>
</html>

